<template>
  <div class="body" v-infinite-scroll="load">
     <Head  />
    <div class="main" >
      <div class="left">
        <Content
          element-loading-text="拼命加载中"
          :list="list"
          :noMore="noMore"
          :isLoading = "loading"
          :isLoad = "true"
        />
      </div>
      <div class="right">
        <MainRight />
      </div>
  </div>
  </div>
</template>

<script>
import Head from '@/components/Head.vue';
import Content from '@/components/Content.vue';
import {getBlog} from '@/http/api/blog';
import MainRight from "../components/MainRight.vue";
export default {
  name:"Index",
 components:{
    Head,
    Content,
    MainRight
 },
 data(){
   return {
     list:[],
     count : 0,
     page:1,
     pageSize:6,
     loading:true,
     moMore:false,
   };
 },
 created(){
   this.getDate();

  },
  beforeRouteUpdate(to, from, next) {
    console.log(to, from, next);
    this.setDate(to.query);
    this.getDate();
    next();
  },
    // 传值
  methods:{
    load(){
      if(this.page<=this.count / this.pageSize){
        this.page++;
        this.getDate();
      }else{
        this.noMore = true;
        this.loading =false;
      }
    },
    setDate(val){
      const{page}=val;
      this.page = page ? +page :1;
    },
    getDate(){
      const params = {
        page:this.page,
        number:this.pageSize,
      }
      getBlog(params).then((res)=>{
        if(res.code === 0){
          this.count = res.count;
          this.list = res.data;
        }
    })
      // this.timo();
    },
    // timo(){
    //   setTimeout(()=>{
    //     this.loading = false;
    //   },200)
    // },
    
},
 
}
</script>
       
<style lang="scss" scoped>
@import "../theme/style.scss";
.body {
  height: 100vh;
  overflow: auto;
}
.main {
 
    height: 100%;
    width: $content_w;
    display: flex;
    padding-top: 25px;
    margin: 0 auto;
  .left {
    flex: 7;
    margin-right: 30px;
    min-height: 100vh;
  }
  .right {
    flex: 3;
    margin-top: 10px;
  }
}
</style>